<template>
  <div class="socialBind">
    <el-collapse>
<!--      <el-collapse-item>-->
<!--        <template slot="title">-->
<!--          <div class="top">-->
<!--            <span><img src="../../../../public/img/icon/facebook.png" alt="">Facebook ({{account.facebookAccounts.length}})</span>-->
<!--            <a href="javascript:void(0)" @click.stop="tipsDialog = true">绑定Facebook</a>-->
<!--          </div>-->
<!--        </template>-->
<!--        <div class="my-account">-->
<!--          <div class="line-list">-->
<!--            <el-row v-for="item,index in account.facebookAccounts" :key="index">-->
<!--              <el-col :span="5" class="more" :title="item.accountEmail">-->
<!--                账号：{{item.accountEmail}}-->
<!--              </el-col>-->
<!--              <el-col :span="5" class="more" :title="item.accountName">-->
<!--                昵称：{{item.accountName?item.accountName:'-'}}-->
<!--              </el-col>-->
<!--              <el-col :span="5">-->
<!--                状态：{{dealState(item)}} <b v-show="item.isBind&&!item.isPageBind"-->
<!--                                          @click="$refs.dialogHome.getData(item.accountEmail,1)">绑定主页</b>-->
<!--              </el-col>-->
<!--              <el-col :span="5" class="more" :title="item.createTime">-->
<!--                绑定时间：{{item.createTime}}-->
<!--              </el-col>-->
<!--              <el-col :span="4" class="more" :title="item.createTime" style="text-align: center">-->
<!--                <el-button type="text" @click="untyingShow(item, 'Facebook')" v-if="item.isBind">解绑</el-button>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-collapse-item>-->
      <el-collapse-item>
        <template slot="title">
          <div class="top">
            <span><img src="../../../../public/img/icon/Twitter.png"
                       alt="">Twitter ({{account.twitterAccounts.length}})</span>
            <a href="javascript:void(0)" @click.stop="$refs.dialogTwitter.init()">绑定Twitter</a>
          </div>
        </template>
        <div class="my-account">
          <div class="line-list">
            <el-row v-for="item,index in account.twitterAccounts" :key="index">
              <el-col :span="5" class="more" :title="item.accountEmail">
                账号：{{item.accountEmail}}
              </el-col>
              <el-col :span="5" class="more" :title="item.accountName">
                昵称：{{item.accountName?item.accountName:'-'}}
              </el-col>
              <el-col :span="5">
                状态：{{item.isBind?'绑定成功':'绑定失败'}}
              </el-col>
              <el-col :span="5" class="more" :title="item.createTime">
                绑定时间：{{item.createTime}}
              </el-col>
              <el-col :span="4" class="more" :title="item.createTime" style="text-align: center">
                <el-button type="text" @click="untyingShow(item, 'Twitter')" v-if="item.isBind" >解 绑</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <div class="top">
            <span><img src="../../../../public/img/icon/linkedin.png" alt="">LinkedIn ({{account.linkedinAccounts.length}})</span>
            <a href="javascript:void(0)" @click.stop="$refs.dialogLinkedIn.init()">绑定LinkedIn</a>
          </div>
        </template>
        <div class="my-account">
          <div class="line-list">
            <el-row v-for="item,index in account.linkedinAccounts" :key="index">
              <el-col :span="5" class="more" :title="item.accountEmail">
                账号：{{item.accountEmail}}
              </el-col>
              <el-col :span="5" class="more" :title="item.accountName">
                昵称：{{item.accountName?item.accountName:'-'}}
              </el-col>
              <el-col :span="5">
                状态：{{item.isBind?'绑定成功':'绑定失败'}}
              </el-col>
              <el-col :span="5" class="more" :title="item.createTime">
                绑定时间：{{item.createTime}}
              </el-col>
              <el-col :span="4" class="more" :title="item.createTime" style="text-align: center">
                <el-button type="text" @click="untyingShow(item, 'linkedln')" v-if="item.isBind" >解 绑</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!--三种绑定弹窗-->
<!--    <DialogFacebook ref="dialogFacebook"></DialogFacebook>-->
    <DialogTwitter ref="dialogTwitter"></DialogTwitter>
    <DialogLinkedIn ref="dialogLinkedIn"></DialogLinkedIn>
    <!--选择主页弹框-->
<!--    <DialogHome ref="dialogHome" @bindAccount="bindAccount" @dealEnd="dealEnd"></DialogHome>-->
    <!-- 解绑确认弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="untyingDialog"
      width="430px">
      <div style="font-size: 14px">
        <p>您确定要解绑<span>{{untyingType}}账号</span><span>{{untyingObj.accountEmail}}</span>吗？</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="untyingDialog = false" size="small">取 消</el-button>
        <el-button type="primary" @click="untying" size="small" :loading="loading">{{loading?'解绑中':'确 定'}}}</el-button>
      </span>
    </el-dialog>
    <!-- facebook绑定前提示 -->
<!--    <el-dialog title="温馨提示" :visible.sync="tipsDialog" width="430px">-->
<!--      <div style="font-size: 14px">-->
<!--        <p>您好，请确认您需要绑定的账号近期（3-5天内）没有使用过。如果您需要绑定的账号在近期使用过，将可能面临被facebook封号的风险。Facebook的安全机制会将账号异地登录-->
<!--          判定为非法操作，从而进行封号处理。为了规避风险，请绑定近期未使用过的账号。给您造成的不便敬请谅解，谢谢!</p>-->
<!--      </div>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="tipsDialog = false" size="small">取 消</el-button>-->
<!--        <el-button type="primary" @click="tipsDialog = false;$refs.dialogFacebook.init()" size="small">确 定</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
    import DialogTwitter from '@/components/automation/socialAccount/DialogTwitter'
    import DialogLinkedIn from '@/components/automation/socialAccount/DialogLinkedIn'
    import {getSocialAccount, unbindingAccounts} from "@/api/mail/admin/mail-set";
    import {getParams, getCookie} from '@/util/util'
    import {bindEmail, bindAccount} from '@/api/automation/socialAccount/bindFaceBook'
    import {bindAccountTwit} from '@/api/automation/socialAccount/bindTwitter'
    import {bindAccountLin} from '@/api/automation/socialAccount/bindLinkedin'

    export default {
        name: "SocialBind",
        components: {DialogTwitter, DialogLinkedIn},
        data() {
            return {
                account: {
                    facebookAccounts: [],
                    twitterAccounts: [],
                    linkedinAccounts: []
                },
                email: '',
                untyingDialog: false,
                tipsDialog: false,
                untyingObj: '',
                untyingType: '',
                loading:false
            }
        },
        mounted() {
            //start - 通过URL获取 code
            let code = getParams('code');
            let platform = getParams('platform');
            this.email = encodeURIComponent(getCookie('mYAccount'));
            if (code) {//执行绑定操作
                this.replaceParamVal('code', '');
                //判断类型
                switch (parseInt(platform)) {
                    case 0: //facebook
                        this.dealFaceBook(code);
                        break;
                    case 2://LinkedIn
                        this.dealLinkedIn(code);
                        break;
                    default:
                        break;
                }
            } else if (getParams('oauth_verifier')) {//twitter
                this.dealTwitter();
            }
            //end - 结束
            this.getData()
        },
        methods: {
            dealState(row) {
                if (row.isBind) {//成功
                    if (row.isPageBind) {
                        return '绑定成功'
                    } else {
                        return '主页未绑定'
                    }
                } else {
                    return '绑定失败'
                }
            },
            untyingShow(obj, type) {
                this.untyingObj = obj
                this.untyingType = type
                this.untyingDialog = true
            },
            untying() {
                this.loading=true;
                unbindingAccounts(this.untyingObj.id).then(res => {
                    this.loading=false;
                    if (res.data.success) {
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        })
                        this.untyingDialog = false
                        this.getData()
                    }
                }).catch(()=>{ this.loading=false})
            },
            //绑定主页
            bindAccount(row, type) {
                bindAccount(row.id, row.accessToken, this.email).then(res => {
                    this.dealEnd(res, type)
                })
            },
            //facebook
            dealFaceBook(code) {
                bindEmail(code, this.email).then(res => {
                    if (res.data.success) {
                        //获取要绑定的主页
                        this.$refs.dialogHome.getData(this.email, 2);
                    }
                })
            },
            //绑定推特
            dealTwitter() {
                let oauth_verifier = getParams('oauth_verifier');
                this.replaceParamVal('oauth_verifier', '');
                bindAccountTwit(oauth_verifier, this.email).then(res => {
                    this.dealEnd(res, 0)
                })
            },
            //绑定领英
            dealLinkedIn(code) {
                bindAccountLin(code, this.email).then(res => {
                    this.dealEnd(res, 0)
                })
            },
            dealEnd(res, type) {
                if (type == 1) {
                    this.$message({
                        message: '主页绑定成功',
                        type: 'success'
                    });
                    this.getData();
                } else {
                    if (res.data.success) {
                        this.$message({
                            message: '账号绑定成功',
                            type: 'success'
                        });
                        if (window.opener) window.opener.location.reload();
                        window.close();
                    }
                }

            },
            replaceParamVal(paramName, replaceWith) {
                var oUrl = window.location.href.toString();
                var re = eval('/(' + paramName + '=)([^&]*)/gi');
                var nUrl = oUrl.replace(re, paramName + '=' + replaceWith);
                window.location = nUrl;
            },
            getData() {
                getSocialAccount().then(res => {
                    if (res.data.success) {
                        this.account = res.data.data;
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
  .socialBind {
    .el-collapse-item__content {
      padding: 15px 0;
    }

    .my-account {
      .line-list {
        font-size: 14px;
        color: #232323;
        padding-left: 10px;

        .el-row {
          width: 100%;
          border-bottom: 1px solid #ddd;
          line-height: 45px;
        }

        b {
          border: 1px solid #0a6cd6;
          color: #0a6cd6;
          padding: 0 5px;
          border-radius: 3px;
          margin-left: 10px;
          cursor: pointer;
        }

        .state {
          color: #000;
          cursor: pointer;
          margin-left: 30px
        }
      }
    }

    .el-collapse-item {
      position: relative;
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 96%;
      padding-left: 10px;

      span {
        display: flex;
        align-items: center;

        img {
          width: 25px;
          height: 25px;
          margin-right: 5px;
        }
      }

      i {
        font-size: 26px;
        margin-right: 5px;
        color: #2A97F9;
      }

      a {
        width: 100px;
        color: #2A97F9;
        text-decoration: underline;
      }
    }

    .el-collapse-item__header {
      height: 40px !important;
      line-height: 40px !important;
      align-items: center;
      margin: 0 0 2px 0;
    }

    .el-collapse-item__wrap {
      border-bottom: 0;
    }
  }
</style>
